<template>
  <div class="page-sub-menu flx-align-center">
    <template v-for="item in subMenuConfig.menuList" :key="item">
      <button
        :class="['hs-sub-btn', subMenuConfig.active === item && 'isActive']"
        @click="handleBtnClick(item)"
      >
        {{ item }}
      </button>
    </template>
    <el-tooltip
      v-if="subMenuConfig.tip.isShow"
      class="box-item"
      effect="light"
      :content="subMenuConfig.tip.text"
      placement="top"
    >
      <el-icon class="tips"><Warning /></el-icon>
    </el-tooltip>
  </div>
</template>

<script setup lang="ts">
import { SubMenu } from './types'

// 定义 props
defineProps<{
  subMenuConfig: SubMenu
}>()

interface EmitProps {
  (e: 'handleSubMenuClick', sign: string): void
}

// 抛出事件
const emit = defineEmits<EmitProps>()

// 按钮点击事件
const handleBtnClick = (sign: string) => {
  emit('handleSubMenuClick', sign)
}
</script>

<style scoped lang="scss">
@import './index.scss';
</style>
